<template>
  <div>
    <selectWithoutHttp
      v-model="selectWidget.options.defaultValue"
      :clearable="true"
      :list-data="defaultTypes"
      label-name="label"
      key-name="value"
      class="width240"
      @change="defaultValueChange"
    />
    <div v-if="selectWidget.options.defaultValue && selectWidget.options.defaultValue >= 5" class="prop-item">
      <div class="label">人员选择字段</div>
      <selectWithoutHttp
        v-model="selectWidget.options.userSelectValue"
        :clearable="true"
        :list-data="userElement"
        label-name="name"
        key-name="key"
        class="width240"
        @change="userSelectValueChange"
      />
    </div>
  </div>
</template>

<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { forEachFormOptions } from '@/utils/formMakeUtils.js';

import { mapState } from 'vuex';
export default {
  components: { selectWithoutHttp },
  model: {
    prop: 'selectWidget',
    event: 'changeData'
  },
  props: {
    selectWidget: {
      type: Object,
      default: () => ({})
    },
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    }
  },
  data() {
    return {
      defaultTypes: [
        { value: 1, label: '当前用户' }, { value: 2, label: '创建人部门主管' },
        { value: 3, label: '创建人上级部门主管' }, { value: 4, label: '创建人一级部门主管' },
        { value: 5, label: '人员选择字段部门主管' },
        { value: 6, label: '人员选择字段上级部门主管' },
        { value: 7, label: '人员选择字段一级部门主管' }
      ]
    };
  },
  computed: {
    ...mapState({
      'userWidget': state => state.formMake.widgetTypes.user,
      'userInfo': state => state.user.userInfo
    }),
    userListWithoutSubform() { // 没有子表单的用户字段
      return this.userWidget.filter(i => {
        return !i.isSubTable && i.key !== this.selectWidget.key;
      });
    },
    userListWithCurrentSubform() { // 当前字段所在子表单的所有人员字段
      return this.userWidget.filter(i => {
        return i.isSubTable && i.linkFormKey === this.selectWidget.linkFormKey && i.key !== this.selectWidget.key;
      });
    },
    userElement() {
      if (!this.userWidget) return [];
      if (this.selectWidget.isSubTable) {
        return this.userListWithCurrentSubform;
      } else {
        return this.userListWithoutSubform;
      }
    }
  },
  created() {
    // 如果所引用的字段被删除，那么需要把 userSelectValue 清空
    if (this.selectWidget.options.userSelectValue) {
      const isDelete = this.userElement.every(i => i.key !== this.selectWidget.options.userSelectValue);
      if (isDelete) {
        this.selectWidget.options.userSelectValue = '';
      }
    }
  },
  methods: {
    defaultValueChange(e) {
      this.selectWidget.options.userSelectValue = '';
      this.$emit('defaultValueChange', e);
    },
    userSelectValueChange(e) {
      const isPass = this.isBeQuoteCheck(e);
      if (!isPass) {
        this.selectWidget.options.userSelectValue = '';
        return;
      }
    },
    // 验证
    isBeQuoteCheck(selectKey) {
      const currentKey = this.selectWidget.key;
      let isBeQuote = false; // 当前字段是否被其他人员字段引用
      let selectKeyIsBeQuote = false; // 所选择字段是否引用其他人员字段
      forEachFormOptions(this.widgetData.list, (element) => {
        if (element.type === 'user') {
          if (element.options.userSelectValue === currentKey) {
            isBeQuote = true;
          }
          if (element.key === selectKey && element.options.userSelectValue) {
            selectKeyIsBeQuote = true;
          }
        }
      });
      if (isBeQuote) {
        this.$message.warning('当前组件已被其他人员选择字段引用，无法再引用其他组件');
        return false;
      }
      if (selectKeyIsBeQuote) {
        this.$message.warning('所选人员选择组件已引用其他人员选择组件，无法引用');
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.prop-item {
  margin-top: 15px;
  .label {
    font-size: 14px;
    color: #606266;
  }
}
</style>
